<template>
  <div class="name_list" ref="list">
    <div class="photo">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in lister" :key="item.id">
          <img :src="item.path" alt="" />
        </van-swipe-item>
      </van-swipe>
      <div class="money">￥{{ masge.price }}</div>
      <div class="name_describe">
        <p>{{ masge.name }}</p>
        <p>{{ masge.desc }}</p>
      </div>
      <div class="describe">
        <p class="goods_details">商品详情</p>
        <p v-html="masge.rich_text"></p>
      </div>
    </div>

    <van-action-bar class="buye">
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        :badge="a"
        @click="goshopcar"
      />
      <van-action-bar-button
        type="warning"
        text="加入购物车"
        @click="inshopcar"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script setup>

import { Toast } from 'vant'



// 拿到购物车数据  利用computed计算属性的get&&set方法进行计算
// 最后把计算的值 = count的值
// 点击加入购物车之后，可以再次请求购物车列表进行更新
import { ref, computed } from "vue";
import { getNotHeader, post, get, addToCart } from '../../utils/request.js'
import { useRoute, useRouter } from 'vue-router'
import { state, mutations } from 'vuex'


let router = useRouter()
let route = useRoute()




let data = route.query.id
console.log(data);


let lister = ref([])
let masge = ref([])

getNotHeader(`/goods/${data}`).then(res => {
  console.log(res);
  lister.value = res.result.s_goods_photos
  masge.value = res.result
})

const inshopcar = async () => {
  let token = sessionStorage.getItem('token')
  if (!token) {
    router.push("/Landing")
  } else {
    let data = {
      goods_id: route.query.id,
      num: 1,
      project_id: '242'
    }
    let res = await post('/shoppingCart', data)
    b()
  }


}

const goshopcar = () => {
  router.push('/Shopcar')
}

let shopCar = ref([])

function b () {
  get(`/shoppingCart?project_id=242`).then(res => {
    console.log(res);
    shopCar.value = res.result
  })
}
b()

let a = computed(() => {
  return shopCar.value.length
})




</script>

<style lang="scss" scoped>
.name_list {
  display: flex;
  flex-direction: column;
  background-color: rgba(161, 160, 160, 0.725);
}

.photo {
  .my-swipe .van-swipe-item {
    color: #fff;
    height: 3.9rem;
    font-size: 0.2rem;
    line-height: 3.9rem;
    text-align: center;
    background-color: white;

    img {
      height: 3.9rem;
    }
  }

  .money {
    height: 0.52rem;
    font-size: 0.3rem;
    line-height: 0.52rem;
    color: red;
    background-color: white;
  }

  .name_describe {
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 0.6rem;
    padding-left: 0.15rem;

    p:first-child {
      font-size: 0.2rem;
      font-weight: 600;
    }
    p:last-child {
      margin-top: 0.12rem;
      font-size: 0.12rem;
      color: #262626;
    }

    img {
      height: 0.87rem;
    }
  }

  .describe {
    display: flex;
    align-items: center;
    margin-top: 0.3rem;
    flex-direction: column;
    line-height: 0.3rem;
    font-size: 0.04rem;
    background-color: white;
  }

  .goods_details {
    text-align: left;
    padding-left: 0.18rem;
    line-height: 0.5rem;
    height: 0.5rem;

    font-size: 0.18rem;
  }
}

.gobuy {
  position: fixed;
  left: 0;
  bottom: 0;
}

.buye {
  position: fixed;
  bottom: 0;
  left: 0;
}
</style>